/*
 * @Author: ly
 * @Date: 2019-11-08 17:26:02
 * @Last Modified by: ly
 * @Last Modified time: 2019-11-12 15:05:02
 */
import React, { MouseEvent } from 'react';
import { connect, DispatchProp } from 'react-redux';
import merge from 'classnames';
import SimpleModalActions from '../../../actions/simple-modal';
import CommonDialog from '../../../components/dialog/common';

import css from './index.less';

interface IModalProps {
  visible: boolean;
  title: string;
  content: string | JSX.Element;
  btnNum: number;
  confirmHandler?: () => void;
  closeHandler?: () => void;
}
class SimpleModal extends React.Component<IModalProps & DispatchProp> {
  render() {
    return (
      <CommonDialog visible={this.props.visible} wrapClassName={css.wrap} className={css.container} onClose={this.hideSimpleModal}>
        <div className={css.title}>{this.props.title}</div>
        <div className={css.content}>{this.props.content}</div>
        {this.props.btnNum > 0 && (
        <div className={css.btnContainer}>
          <div
            className={merge(css.btn, css.confirm)}
            onClick={(event: MouseEvent) => {
              event.stopPropagation();
              this.props.confirmHandler && this.props.confirmHandler();
            }}
          >
            确定
          </div>
          {this.props.btnNum > 1 && (
          <div
            className={merge(css.btn, css.cancel)}
            onClick={(event: MouseEvent) => {
              event.stopPropagation();

              this.props.closeHandler && this.props.closeHandler();
              this.hideSimpleModal();
            }}
          >
            取消
          </div>
          )}
        </div>
        )}
      </CommonDialog>
    );
  }

  private readonly hideSimpleModal = () => {
    this.props.dispatch({ type: SimpleModalActions.SIMPLE_MODAL, payload: { visible: false } });
  };
}

export default connect()(SimpleModal);
